<template>
    <div class="home-service">
        <div class="service-top flex-content">
            <div v-for="(item, index) in serviceList" :key="index" class="service-item cup" @mouseenter="onMouseout(item)">
                {{ item.label }}
            </div>
        </div>
        <div class="service-bottom" :style="{ backgroundImage: 'url(img/service/' + currentData.img + '.jpeg)' }">
            <!-- <img :src="'img/service/' + currentData.img + '.jpeg'" alt="img" class="wh" /> -->
            <div class="service-bottom-content">
                <div class="bottom-title"> {{ currentData.text }} </div>
                <div class="bottom-desc"> {{ currentData.describe }}</div>
                <div class="bottom-introduce">
                    <div class="view-vido lineHeight-25">观看视频</div>
                    <div class="see-detail lineHeight-25">了解详情</div>
                </div>
            </div>
        </div>
        <div class="service-right flex-base"> </div>
    </div>
</template>
<script setup lang="ts">
    import { ref } from 'vue'
    import { ServiceListInterface } from '@/types/home/HomeInterface'
    const serviceList = ref<ServiceListInterface[]>([
        {
            label: '测试1',
            img: '1',
            text: '测试1测试1测试1',
            describe: '测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1',
            icon: '2'
        },
        {
            label: '测试2',
            img: '2',
            text: '水水水水水水水水水水水',
            describe: '水水水水水水水水水水水水水水水水水水水顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶',
            icon: '1'
        },
        {
            label: '测试3',
            img: '3',
            text: '反反复复烦烦烦烦烦烦烦烦烦烦烦烦',
            describe: '反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦',
            icon: '1'
        },
        {
            label: '测试4',
            img: '4',
            text: '踩踩踩踩踩踩踩踩踩踩踩踩踩',
            describe: '踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩从踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩从踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩从',
            icon: '1'
        },
        {
            label: '测试5',
            img: '4',
            text: '日日日日日日日日日日日',
            describe: '日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日',
            icon: '1'
        },
        {
            label: '测试6',
            img: '4',
            text: '她她她她她她她她她她她她她她她',
            describe: '她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她',
            icon: '1'
        }
    ])
    const currentData = ref<ServiceListInterface>(serviceList.value[0])
    const onMouseout = (item: any) => (currentData.value = item)
</script>
<style scoped lang="less">
    .home-service {
        background: #f0f0f0;
        .service-top {
            width: 70%;
            margin: 0 auto;
            justify-content: space-between;
            .service-item {
                float: left;
                font-size: 16px;
                display: inline-block;
                text-align: center;
                height: 45px;
                line-height: 45px;
                padding: 0 20px;
                transition: all 0.3s;
            }
            .service-item:hover {
                color: #ffffff;
                background: @theme-color;
            }
        }
        .service-bottom {
            width: 100%;
            height: 450px;
            transition: all 0.3s;
            background-repeat: no-repeat;
            background-position: right top;
            overflow: hidden;
            display: flex;
            align-items: center;
            .service-bottom-content {
                margin: 0 0 0 120px;
                .bottom-title {
                    font-size: 16px;
                    font-weight: 500;
                    color: #333;
                    margin-left: 23px;
                    margin-top: 10px;
                    max-width: 330px;
                }
                .bottom-desc {
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 34px;
                    margin-top: 28px;
                    width: 315px;
                    padding: 16px 23px;
                    background: rgba(255, 255, 255, 0.6);
                    border-radius: 2px;
                }
                .bottom-introduce {
                    margin-top: 62px;
                    margin-left: 23px;
                    div {
                        text-align: center;
                        width: 90px;
                        font-size: 14px;
                        border-radius: 2px;
                    }
                    .view-vido {
                        background: @theme-color;
                        display: inline-block;
                        color: #fff;
                    }
                    .see-detail {
                        margin-left: 15px;
                        background: #fff;
                        display: inline-block;
                        color: #000;
                    }
                }
            }
        }
    }
</style>
